<template>
  <a-modal title="修改公告" v-model="show" :maskClosable="false" :width="1300" placement="right" :closable="true"
    @cancel="onClose" :footer="null" :visiable="notityEditVisiable">
    <a-form :form="form">
      <a-row>
        <a-col :md="12" :sm="24">
          <!-- initialValue:this.NotityInfoData.title这个是给表单赋公告首页传过来的值-->
          <a-form-item label='公告标题' :validateStatus="validateStatus" v-bind="formItemLayout">
            <a-input v-decorator="['title', {
              rules: [{ required: true, message: '用户登录账号不能为空' }], initialValue: this.NotityInfoEditData.title

            }]" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='公告开始期' v-bind="formItemLayout">
            <a-date-picker placeholder="请选择日期" name="reconFile1" style="width: 100%;" @change="beginTimeChange"
              v-decorator="['beginTime', {
                rules: [{ required: true, message: '请输入公告开始日期' }], initialValue: this.NotityInfoEditData.beginTime
              }]" format="YYYYMMDD" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label='公告有效期' v-bind="formItemLayout" :validateStatus="expireTimeStatus" :help="expireTimehelp">
            <a-date-picker placeholder="请选择日期" style="width: 100%;" name="reconFileDate" @change="expireTimeChange"
              v-decorator="['expireTime', { rules: [{ required: true, message: '请输入公告有效期' }], initialValue: this.NotityInfoEditData.expireTime }]"
              format="YYYYMMDD" />
          </a-form-item>
        </a-col>

        <a-col :md="12" :sm="24">
          <a-form-item label='公告内容' v-bind="formItemLayout">
            <a-textarea
              v-decorator="['message', { rules: [{ required: true, message: '请输入公告内容' }], initialValue: this.NotityInfoEditData.message }]"
              allow-clear />

          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label='商户号' v-bind="formItemLayout">
            <a-textarea v-decorator="['circleList', { initialValue: this.circleList }]" :dataSource="batchDataSource"
              warp="hard" allow-clear />
            <!-- <a @click="circleli" type="primary">确定</a> -->
            <h5> 请输入商户号，一行一个，最多输入1000个<br />
              已录入{{ this.notity.remark1 }}个商户号</h5>

            <a type="primary" @click="exportExcel">导出</a>
            <p> </p>
          </a-form-item>
        </a-col>
        <a-col class="components" :md="12" :sm="24">
          <a @click="circle" type="primary">确定</a>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='商圈号' v-bind="formItemLayout">
            <a-textarea v-decorator="['merchantList', { initialValue: this.merchantList }]" allow-clear />
            <h5> 请输入商圈编号，一行一个，最多输入10个<br />
              已录入{{ this.notity.remark2 }}个商圈</h5>
            <p> </p>
          </a-form-item>
        </a-col>
        <a-col class="components" :md="12" :sm="24">
          <a @click="mchnt" type="primary">确定</a>
        </a-col>
      </a-row>
    </a-form>
    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>
  </a-modal>
</template>
<script>

const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 14 }
}

export default {
  name: 'NotityEdit',

  props: {
    notityEditVisiable: {
      default: false
    },
    NotityInfoEditData: {
      require: true
    },
    roleInstId: '',
    roleCodeData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      help: '',
      menuTreeKey: +new Date(),
      loading: false,
      formItemLayout,
      form: this.$form.createForm(this),
      menuSelectStatus: '',
      menuSelectHelp: '',
      role: {
        menuId: ''
      },
      notity: {
        id: '',
        instId: this.roleInstId,
        title: '',
        beginTime: null,
        expireTime: null,
        message: '',
        circleList: '',
        merchantList: '',
        remark1: 0,
        remark2: 0
      },
      menuTreeData: [],
      allTreeKeys: [],
      checkedKeys: [],
      defaultCheckedKeys: [],
      expandedKeys: [],
      validateStatus: '',
      checkStrictly: false,
      batchDataSource: [],
      newBeginTime: null,
      newExpireTime: null,
      expireTimeStatus: '',
      expireTimehelp: ''
    }
  },
  computed: {
    show: {
      get: function () {
        return this.notityEditVisiable
      },
      set: function () {
      }
    },
    circleList() {
      this.NotityInfoEditData.circleList ? this.NotityInfoEditData.circleList.join('\n') : ''
      this.form.setFieldsValue({circleList:this.NotityInfoEditData.circleList})
    },
    merchantList() {
      this.NotityInfoEditData.merchantList ? this.NotityInfoEditData.merchantList.join('\n') : ''
      this.form.setFieldsValue({merchantList:this.NotityInfoEditData.merchantList})
    }
  },

  methods: {
    beginTimeChange(date, dateString) {
      this.newBeginTime = dateString
      const expireTime = this.NotityInfoEditData.expireTime
      if (this.newBeginTime > expireTime) {
        this.$emit('clearExpireTime')
      }
    },
    expireTimeChange(date, dateString) {
      this.expireTimeStatus = ''
      this.expireTimehelp = ''
      const beginTime = this.NotityInfoEditData.beginTime
      this.newExpireTime = dateString
      if (this.newExpireTime < (this.newBeginTime ? this.newBeginTime : beginTime)) {
        this.expireTimeStatus = 'error'
        this.expireTimehelp = '公告有效期不能在公告开始期之前'
      }
    },
    reset() {
      this.expireTimeStatus = ''
      this.expireTimehelp = ''
      this.loading = false
      this.form.resetFields()
    },

    onClose() {
      this.reset()
      this.$emit('close')
    },
    expandAll() {
      this.expandedKeys = this.allTreeKeys
    },
    closeAll() {
      this.expandedKeys = []
    },
    exportExcel() {
      this.secircle()
      this.dataSource = this.notity.circleList
      this.selectCircleInfo = this.notity.circleList
      console.log(this.selectCircleInfo)
      debugger
      let { filteredInfo } = this
      this.$export('gen/tbnotifyinfo/excel', {
        ...this.notity
        // ...filteredInfo
      })
    },
    secircle() {
      let values = this.form.getFieldsValue(['circleList', 'merchantList'])
      if (typeof values !== 'undefined') {
        Object.keys(values).forEach(_key => {
          this.notity[_key] = values[_key]
        })
      }
    },
    handleCheck(checkedKeys) {
      this.checkedKeys = checkedKeys
      let checkedArr = Object.is(checkedKeys.checked, undefined) ? checkedKeys : checkedKeys.checked
      if (checkedArr.length) {
        this.menuSelectStatus = ''
        this.menuSelectHelp = ''
      } else {
        this.menuSelectStatus = 'error'
        this.menuSelectHelp = '请选择相应的权限'
      }
    },
    circle() {
      this.secircle()
      this.$post('gen/tbnotifyinfo/circle', this.notity).then((r) => {
        if (r.data == "") {
          circle = '没有找到该商户'
          this.notity.circleList = ''
        } else {
          this.$message.success("录入商户成功")
          this.notity.remark1 = r.data.remark1
        }
      })
    },

    mchnt() {
      this.secircle()
      this.$post('gen/tbnotifyinfo/Merchant', this.notity).then((r) => {
        if (r.data == "") {
          circle = '没有找到该商圈'
          this.notity.circleList = ''
        } else {
          this.$message.success("录入商圈成功")
          this.notity.remark2 = r.data.remark2
        }
      })
    },
    handleExpand(expandedKeys) {
      this.expandedKeys = expandedKeys
    },
    setRoleFields() {
      let values = this.form.getFieldsValue(['id', 'expireTime', 'title', 'beginTime', 'message', 'circleList', 'merchantList', 'instId'])
      if (typeof values !== 'undefined') {
        Object.keys(values).forEach(_key => {
          if ("beginTime" == _key) {
            if (values[_key].constructor == String) {
              this.notity.beginTime = values.beginTime;
            } else {
              this.notity.beginTime = values.beginTime.format('YYYYMMDD');
            }
          } else if ("expireTime" == _key) {
            if (values[_key].constructor == String) {
              this.notity.expireTime = values.expireTime;
            } else {
              this.notity.expireTime = values.expireTime.format('YYYYMMDD');
            }
          } else if ("instId" == _key) {
            this.notity[_key] = this.roleInstId
          } else if ("id" == _key) {
            //在公告首页拿法人号赋值到本页面的法人号
            this.notity[_key] = this.NotityInfoEditData.id
          } else {
            this.notity[_key] = values[_key]
          }
        })
      }
    },
    handleSubmit() {
      this.setRoleFields()
      if (this.expireTimeStatus == 'error') {
        this.$message.error('请重新选择公告有效期')
        return
      }
      this.form.validateFields((error, values) => {
        if (!error) {
          this.setRoleFields()
          this.$put('gen/tbnotifyinfo', this.notity).then(res => {
            this.reset()
            if (res) {
              this.notity.remark1 = 0
              this.notity.remark2 = 0
              this.$emit('success')
            } else {
              this.notity.remark1 = 0
              this.notity.remark2 = 0
            }
          })
        }
      })
    }
  },
  watch: {
    notityEditVisiable() {
      if (this.notityEditVisiable) {
        this.$get('admin/upmpmenu').then((r) => {
          this.menuTreeData = r.data.rows.children
          this.allTreeKeys = r.data.ids
          this.$get('admin/upmprole/menu/' + this.NotityInfoEditData.id).then((r) => {
            this.defaultCheckedKeys.splice(0, this.defaultCheckedKeys.length, r.data)
            this.checkedKeys = r.data
            this.expandedKeys = r.data
            this.menuTreeKey = +new Date()
          })
        })
      }
    },
  }
}
</script>
<style >
.components {
  width: 300px;
  margin: 30px -445px 80px -126px;
  float: left;
}
</style>
